<template>
    <div class="ADorganizationScend">        
        <cjcNav title="组织机构" @customRouter="customRouter"/>
        <pullRefresh>
            <div class="organization">
                <!-- 面包屑导航 -->
                <Row class="top" type="flex" align="middle">
                    <Col span=3 offset=1>
                        &nbsp;
                    </Col>
                    <Col span=20 class="text">
                        <Row class="text-area">
                            <Col span=6 class="school">西南财经大学天府学院</Col>
                            <Col span=18 class="department">
                                <Icon type="chevron-right" color="#eaeaea"></Icon>&nbsp;&nbsp;{{this.$route.params.DWMC}}
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <!-- 组织人员列表 -->
                <Row class="top" type="flex" align="middle"
                    @click.native="toLink('AdDetails', item, $route.params.DWMC, $route.params.DWH)"
                    v-for="item in this.$store.state.Colleagues" 
                    :key="item.USER_ID">
                    <Col span=2 offset=2>
                        <div class="logo-op">
                            <Icon class="tou" type="android-contact" v-if="item.XBM === 1"></Icon>
                            <Icon class="tou-two" type="android-contact" v-if="item.XBM === 2"></Icon>
                        </div>
                    </Col>
                    <Col span=20 class="text">
                        {{item.XM}}&nbsp;&nbsp; <span class="level">{{item.SF}}</span>
                    </Col>
                </Row>
            </div>
        </pullRefresh>
        <Spin size="large" fix v-if="!this.$store.state.Colleagues"></Spin>
    </div>
</template>

<script>
export default {
    components: {
        cjcNav: () => import('@/components/common/Nav.vue'),
        pullRefresh: () => import('@/components/common/pullRefresh.vue')
    },
    methods: {
        customRouter() {
            this.$router.push({
                name: 'ADorganization'
            })
        },
        toLink(link, info, DWMC, DWH) {
            this.$store.commit('SET_tsPepole', {
                info,
                BMXX: {
                    DWH: DWH,
                    DWMC: DWMC
                }
            })
            this.$router.push({
                name: link
            })
        },
        /**
         * 设置部门同事列表
         */
        async setColleagues() {
            let Colleagues = await this.$store.dispatch('getColleaguesByDwh', {
                DWH: this.$route.params.DWH
            })
            this.$store.commit('SET_Colleagues', Colleagues.result)
        }
    },
    created() {
        this.$store.commit('SET_Colleagues', null)
        this.setColleagues()
    }
}
</script>

<style lang="less">
.ADorganizationScend{
    height: 100vh;
    .organization{
        .top{
            .logo{
                width: 30px;
                img{
                    width: 100%;
                }
            }
            .logo-op{
                width: 12px;
                img{
                    width: 100%;
                }
            }
            .tou{
                background-color: #0093dd;
                border-radius: 100%;
                color: #fff;
                font-size: 14px;
                padding: 3px 4px;
            }
            .tou-two{
                background-color: #f79800;
                border-radius: 100%;
                color: #fff;
                font-size: 14px;
                padding: 3px 4px;  
            }
            .level{
                color: #999;
                font-weight: 500;
            }
        }
        .text{
            height: 100%;
            padding: 10px 0;
            font-size: 15px;
            font-weight: bolder;
            line-height: 30px;
            border-bottom: 1px solid #eaeaea;
            .text-area{
                margin-left: -20px;
            }
            .school{
                color: rgb(45, 140, 240);
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .department{
            }
        }
    }
}
</style>
